<include file="public@header_vue"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link href="__STATIC__/font-awesome/css/font-awesome.min.css?page=index" rel="stylesheet" type="text/css">
<hook name="admin_before_head_end"/>
</head>
<body>
<el-main id="app">

    <!--<empty name="has_smtp_setting">
        <el-alert title="邮箱配置未完成,无法进行邮件发送!" type="error" show-icon></el-alert>
    </empty>-->

    <if condition="!extension_loaded('fileinfo')">
        <el-alert title="php_fileinfo扩展没有开启，无法正常上传文件！" type="error" show-icon></el-alert>
    </if>

    <el-row :gutter="20">
        <el-col :span="6">
            <el-card>
                <el-row class="data-count">
                    <a href="/admin/member/memberList?param=1">
                    <el-col :span="12" class="data-count-icon" style="color:#303133;"><i class="fa fa-user normal"></i></el-col>
                    <el-col :span="12" class="data-count-databox">
                        
                        <span class="data-count-title" style="color:#303133;">今日新增用户</span><br>
                        <span class="data-count-data" style="color:#303133;">+{{dailyIncreased.toFixed(0)}}</span>
                        
                    </el-col>
                    </a>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <el-row class="data-count">
                    <a href="/admin/member/memberList?param=2">
                    <el-col :span="12" class="data-count-icon" style="color:#303133;"><i class="fa fa-users normal"></i></el-col>
                    <el-col :span="12" class="data-count-databox">
                        
                        <span class="data-count-title" style="color:#303133;">本月新增用户</span><br>
                        <span class="data-count-data" style="color:#303133;">+{{monthIncreased.toFixed(0)}}</span>
                        
                    </el-col>
                    </a>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <el-row class="data-count">
                    <a href="/admin/Curriculum/order?param=1">
                    <el-col :span="12" class="data-count-icon" style="color:#303133;"><i class="fa fa-shopping-cart normal"></i></el-col>
                    <el-col :span="12" class="data-count-databox">
                        <span class="data-count-title" style="color:#303133;">今日交易量</span><br>
                        <span class="data-count-data" style="color:#303133;">+{{dailyTread.toFixed(0)}}</span>
                    </el-col>
                    </a>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <el-row class="data-count">
                    <a href="/admin/Curriculum/order?param=2">
                    <el-col :span="12" class="data-count-icon" style="color:#303133;"><i class="fa fa-cart-plus normal"></i></el-col>
                    <el-col :span="12" class="data-count-databox">
                        <span class="data-count-title" style="color:#303133;">本月交易量</span><br>
                        <span class="data-count-data" style="color:#303133;">+{{monthTread.toFixed(0)}}</span>
                    </el-col>
                    </a>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</el-main>
<hook name="admin_before_body_end"/>
</body>
<style>
.el-alert {
    margin-bottom: 10px;
}
.data-count {
    height: 100px;
}
.data-count-icon {
    font-size: 64px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.data-count-databox {
    height: 100px;
    padding: 20px 0;
    text-align: right;
}
.data-count-title {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
}
.data-count-data {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    font-weight: bold;
    white-space:nowrap;
}
.chart canvas {
    margin-left: auto;
    margin-right:auto;
}
</style>
<script>
var app = new Vue({
    el: '#app',
    created () {
        TweenLite.to(this.$data, 0.5, { dailyIncreased: {$dailyIncreased} });
        TweenLite.to(this.$data, 0.5, { monthIncreased: {$monthIncreased} });
        TweenLite.to(this.$data, 0.5, { dailyTread: {$dailyTread} });
        TweenLite.to(this.$data, 0.5, { monthTread: {$monthTread} });
    },
    data() {
        return {
            dailyIncreased: 0,
            monthIncreased: 0,
            dailyTread: 0,
            monthTread: 0
        }
    }
});
</script>
</html>
